<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
        series: [
            {
                type: 'pie',
                minAngle: 5,  //最小显示角度
                // minShowLabelAngle: 6, // 不显示最小角度文字
                startAngle: 180, // 开始角度
                endAngle: 360,  // 结束角度
                label: {
                    show: true,
                    position: 'inside'
                },
                radius: ["40%", "80%"], // 内径外径
                padAngle: 5, // 角度间距
                itemStyle: {
                    borderRadius: 10,
                },
                data: [
                    {
                        name: 'mike',
                        value: 1099
                    },
                    {
                        name: 'alex',
                        value: 888
                    },
                    {
                        name: 'mary',
                        value: 700
                    },
                    {
                        name: 'anna',
                        value: 500
                    },
                    {
                        name: 'joh',
                        value: 300
                    },
                ],
                roseType: 'radius' //玫瑰图：饼图的变种
            }
        ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  